<template>
  <!-- 药品入库页面 -->
  <div id="app">
    <!-- 设置顶部导航栏 -->
    <mt-header title="药 品 入 库">
      <mt-button icon="back" @click="goBack" slot="left">返回</mt-button>
      <mt-button slot="right" @click="goHome">
        <img
          src="../../assets/images/home.png"
          height="20"
          width="20"
          slot="icon"
          style="margin-top: 5px"
        />
      </mt-button>
    </mt-header>
    <div class="main">
      <!-- 表单区域 -->
      <van-field
        clearable
        readonly
        name="name"
        label="药品名称"
        :value="iptObj.name"
        placeholder="请选择药品名称"
        @click="showPicker1 = true"
        :rules="[{ required: true, message: '请选择药品名称' }]"
      />
      <van-field
        clearable
        name="price"
        label="数量"
        placeholder="数量"
        v-model="iptObj.number"
        type="number"
        :rules="[{ required: true, message: '请填写添加价格' }]"
      />
      <van-field
        clearable
        readonly
        name="calendar"
        label="过期时间"
        placeholder="过期时间"
        :value="iptObj.validDate"
        @click="showCalendar = true"
        :rules="[{ required: true, message: '请选择过期时间' }]"
      />
      <van-field
        clearable
        name="batchNumber"
        v-model="iptObj.batchNumber"
        label="批次"
        placeholder="批次"
        type="number"
        :rules="[{ required: true, message: '请填写批次' }]"
      />
      <van-field
        clearable
        readonly
        name="drugType"
        label="入库类型"
        :value="type"
        placeholder="请选择入库类型"
        @click="showPicker2 = true"
        :rules="[{ required: true, message: '请选择入库类型' }]"
      />

      <van-button round block type="primary" @click="clickBtn"
        >确认出库</van-button
      >

      <!-- 日历 -->
      <van-calendar v-model="showCalendar" @confirm="DateConfirm" />

      <!-- 药品名称选择器 -->
      <van-popup v-model="showPicker1" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          value-key="name"
          @confirm="onConfirm"
          @cancel="showPicker1 = false"
        />
      </van-popup>
      <!-- 药品类型选择器 -->
      <van-popup v-model="showPicker2" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns2"
          @confirm="onConfirm2"
          @cancel="showPicker2 = false"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "Warehousing",

  data() {
    return {
      showPicker1: false,
      showPicker2: false,
      showCalendar: false, //日历是否展示
      columns: [], //药品名称数组
      columns2: ["普通入库", "紧急入库"],
      type: "", //入库类型

      iptObj: {
        name: "", //药品名
        drugId: "", //药品id

        number: null, //数量
        validDate: "", //过期时间
        batchNumber: "", //批次
      },
    };
  },

  mounted() {},

  created() {
    this.getDrugNameList();
  },

  methods: {
    goBack() {
      this.$router.push({
        path: "./DrugRecord",
      });
    },
    goHome() {
      this.$router.push({
        path: "./index",
      });
    },
    //日期确定按钮
    DateConfirm(date) {
      this.showCalendar = false;
      this.iptObj.validDate = this.formatDate(date);
      console.log(date);
    },
    //日历插件返回的时间对象
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    //入库按钮点击
    clickBtn() {
      this.iptObj.validDate = this.iptObj.validDate + " 00:00:00";
      this.iptObj.number = parseInt(this.iptObj.number);
      this.iptObj.createUser = window.localStorage.getItem("userName");
      this.iptObj.status = 0;
      this.iptObj.type = "普通入库";

      console.log(this.iptObj);

      this.$http
        .post("drug-warehousing-record", this.iptObj)
        .then((res) => {
          Toast("入库成功");
          this.$router.push({
            path:'./DrugRecord'
          })
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取药品名称字典
    getDrugNameList() {
      this.$http
        .get("drug-dictionary", {})
        .then((res) => {
          //console.log(res);
          this.columns = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //药品名称选择器展开
    onConfirm(value) {
      this.iptObj.name = value.name;
      //   console.log(value.name + value.id);
      this.iptObj.drugId = value.id;
      this.showPicker1 = false;
    },
    onConfirm2(value) {
      this.type = value;
      this.showPicker2 = false;
    },
  },
};
</script>

<style lang="less" scoped>
</style>